/* 页面整体样式 */
@font-face {
    font-family: 'Misans';
    /* 自定义字体的名称 */
    src: url('MiSans-Medium.ttf') format('ttf'),
      /* 字体文件的路径和格式 */
  }
body {
    font-family: 'Misans';
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#whiteboard {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(255, 255, 255);
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* 绘图区域样式 */
#canvas {
    border: 1px solid black;
    cursor: crosshair;
    position: fixed;
    transform: translateZ(0);
    z-index: 1;

}

#main-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 使用 grid 布局，两列 */
    gap: 10px; 
    width: 650px;
    height: 100px;
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    border-radius: 50px;
    background-color: #ffffff91;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.233); /* 外阴影 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    z-index: 2;
    
    
}

#width-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 使用 grid 布局，两列 */
    gap: 100px;
    width: 70px;
    height: 15px;
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* 使用水平布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50px;
    background-color: #ffffff;
    color:black;
    box-shadow: 0px 0px 20px rgba(129, 129, 129, 0.233),
    inset 0px 0px 5px rgba(253, 253, 253, 0); 
    overflow: hidden; 
    transition: 
        width 0.4s cubic-bezier(0, 0, 0.21, 1.2), /* 贝塞尔曲线过渡 */
    height 0.2s cubic-bezier(0, 0, 0.58, 1.5),   
    gap 0.2s cubic-bezier(0, 0, 0.58, 1),   
    color 0.3s cubic-bezier(0, 0, 0.21, 1), /* 贝塞尔曲线过渡 */
    background-color 0.3s cubic-bezier(0, 0, 0.21, 1), /* 贝塞尔曲线过渡 */

    bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
}

#width-container.active {

    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 使用 grid 布局，两列 */
    gap: 40px;
    width: 350px;
    height: 30px;
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* 使用水平布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50px;
    background-color: #ffffff;
    box-shadow: 0px 10px 50px rgba(129, 129, 129, 0.233),
    inset 0px 0px 10px rgba(253, 253, 253, 0); 

    overflow: hidden; /* 隐藏超出容器的内容 */
    
    
}

#width-container.eraser-active {

    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 使用 grid 布局，两列 */
    gap: 40px;
    width: 100px;
    height: 40px;
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* 使用水平布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50px;
    background-color: #ffffff;
    box-shadow: 0px 10px 50px rgba(129, 129, 129, 0.233),
    inset 0px 0px 10px rgba(253, 253, 253, 0); 

    overflow: hidden; /* 隐藏超出容器的内容 */
    
    
}
#eraserIndicator {
    position: absolute;
    width: 50px; /* 初始值，实际会在 JS 中动态更新 */
    height: 50px; /* 初始值，实际会在 JS 中动态更新 */
    background-color: rgba(200, 200, 200, 0.7);
    border-radius: 50%;
    pointer-events: none;
    display: none;
  }

.button {
    display: flex; /* 使用水平布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100px;
    background-size:cover;
    border: none; /* 移除按钮默认边框 */
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.171));
    z-index: 3;

    
}

.color {
    border-radius: 50%;
    margin: 3px; 
}

.appversion {
    position: fixed;
    bottom: 10px; 
    left: 10px; 
    font-size: 1px;
    color: #5353539f;
}

.width {
    display: flex; /* 使用水平布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.width.active {
    display: flex; /* 使用水平布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: #1eadff 2px solid;

}

.width-font{
    white-space: nowrap;
    opacity: 0.2;
}

.width-font.active{
    opacity: 1;
    font-size: 15px;
    transition: 
        opacity 0.8s cubic-bezier(0.25, 0, 0.25, 1);/* 贝塞尔曲线过渡 */

}

.clearCanvas{
    font-size: 16px;
    color: #ffffff;
    border: none;
    background-color: #ff0000;
    width: 150%;
    height:120%;
}